<div style="width:100%;">
  <nz-affix [nzOffsetTop]="60">
    <nz-breadcrumb>
      <nz-breadcrumb-item>告警事件管理</nz-breadcrumb-item>
    </nz-breadcrumb>
  </nz-affix>
</div>


<form nz-form [formGroup]="searchForm" class="search_form">
  <div nz-row>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">上报时间</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <app-datetime-picker (valueChange)="timeChangeFunc($event)" [dateTimeOptions]="dateTimeOptions"
            [quickModeOptions]="quickModeOptions" [clearTimeMode]="false">
          </app-datetime-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="5">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">上报状态</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-select style="width: 100%" nzPlaceHolder="请选择上报状态" formControlName="reportStatus" nzAllowClear>
            <nz-option *ngFor="let option of reportStatusOption" [nzLabel]="option.label"
              [nzValue]="option.value"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="5">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">事件名称</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <input type="text" nz-input placeholder="请输入事件名称" formControlName="eventName" />
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="5">
      <nz-form-item>
        <nz-form-label [nzSpan]="4">告警级别</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-select style="width: 100%" nzMode="multiple" nzPlaceHolder="请选择告警级别" formControlName="warnLevel"
            nzAllowClear>
            <nz-option *ngFor="let option of levelOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="3">
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <div class="btns">
            <button nz-button nzType="primary" (click)="getList('new')" style="margin-right: 8px;">
              查询
            </button>
            <!-- <button nz-button (click)="resetForm()">
                            重置
                        </button> -->
          </div>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
</form>


<div class="total">
  <div>
    事件数（总数：<span>
      <ng-container *ngIf="disposing.length > 0">
        {{ disposing.length }} /
      </ng-container>
      {{ total }})
    </span>
    <label nz-checkbox class="checkbox" [nzDisabled]="total > 10000" [(ngModel)]="isAllChecked"
      (ngModelChange)="checkedAllChange($event)">
      全选
    </label>
  </div>
  <div class="btns">
    <button nzType="primary" nz-button (click)="addData()">新增数据</button>
    <button nzType="primary" nz-button [disabled]="disposing.length == 0 && !isAllChecked" nz-popconfirm
      nzTitle="确定上传吗?" (nzOnConfirm)="batchDeletion(1)">
      批量上传
    </button>
    <button nzType="primary" nz-button [disabled]="disposing.length == 0 && !isAllChecked" nz-popconfirm
      nzTitle="确定删除吗?" (nzOnConfirm)="batchDeletion(2)">
      批量删除
    </button>
  </div>
</div>
<div class="table">
  <nz-table #basicTable [nzData]="dataList" [nzLoading]="loading" [nzTotal]="total" [(nzPageIndex)]="pageIndex"
    [(nzPageSize)]="pageSize" (nzPageIndexChange)="pageChange($event, 'page')"
    (nzPageSizeChange)="pageChange($event, 'size')" nzShowSizeChanger [nzPageSizeOptions]="[10, 20, 50, 100]"
    [nzFrontPagination]="false">
    <thead>
      <tr>
        <th nzWidth="5%" nzShowCheckbox [nzDisabled]="isAllChecked" (nzCheckedChange)="checkedOnePageChange($event)"
          [nzIndeterminate]="isOnePageIndeterminate" [(nzChecked)]="isOnePageChecked"></th>
        <!-- <th nzWidth="10%">任务名称</th> -->
        <th>事件名称</th>
        <th>告警级别</th>
        <th>告警类型</th>
        <th>源IP</th>
        <th>源端口</th>
        <th>目的IP</th>
        <th>目的端口</th>
        <th>协议</th>
        <th>方向</th>
        <th>上报状态</th>
        <th>上报时间</th>
        <th nzWidth="10%">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr class="tableBody" *ngFor="let data of basicTable.data; let i = index">
        <td nzShowCheckbox [(nzChecked)]="disposing.map[data.id]" [nzDisabled]="isAllChecked"
          (nzCheckedChange)="checkedOneChange(data, $event)"></td>
        <td>
          <!-- <a class="btn_a" [routerLink]="['/WebApi/business_common_service/static/dist/#/judge-operation/route/event/details', data.id]">
                        {{data.event_name.length > 30 ?
                        (data.event_name|slice:0:30) + '...' : (data.event_name| avoidNull)}}
                    </a> -->
          <!-- <span (click)="goToDetail(data)" class="link" nz-tooltip [nzTitle]="data.event_name | avoidNull">{{data.event_name.length > 30 ?
                        (data.event_name|slice:0:30) + '...' : (data.event_name| avoidNull)}}</span> -->
          <a [routerLink]="" (click)="goToDetail(data)" nz-tooltip
            [nzTitle]="data.event_name | avoidNull">{{data.event_name && data.event_name.length > 30 ?
            (data.event_name|slice:0:30) + '...' : (data.event_name| avoidNull)}}</a>
        </td>
        <td>{{data.alarm_level | avoidNull}}</td>
        <td>{{data.alarm_type | avoidNull}}</td>
        <td>{{data.source_ip | avoidNull}}</td>
        <td>{{data.source_port | avoidNull}}</td>
        <td>{{data.destination_ip | avoidNull}}</td>
        <td>{{data.destination_port | avoidNull}}</td>
        <td>{{data.protocol | avoidNull}}</td>
        <td>{{data.direction | avoidNull}}</td>
        <td>{{data.report_status | avoidNull}}</td>
        <td>{{data.report_time}}</td>
        <td>
          <a class="btn_a" [ngClass]="{'disable-btn': ! ( data.report_status === '上报失败')}"
            (click)="placeAndClose(data.id,0,1)">上报</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a nz-popconfirm class="btn_a" nzTitle="确定删除吗?" (nzOnConfirm)="placeAndClose(data.id,0,2)">删除</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>
